<template>
	<view style="font-size: 12px;text-align: center;">
		<!-- <movable-area style="width:100vw;height:100vh;position: fixed;top:0;left:0;pointer-events: none;z-index: 100000">
			<movable-view style="pointer-events: auto;"  :x="x" :y="y" direction="all" @change="onChange">
				<view style="width:80rpx;height:80rpx;border-radius: 50%;box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04)" :style='{"background":color}'> 
					<image src="../../static/save.png" style="width:50rpx;height:50rpx;margin-top: 15rpx;"></image>
				</view>
			</movable-view>
		</movable-area> -->
		<u-navbar title='加创材料' left-icon=" " :bgColor="color" titleStyle="color:white" :placeholder="true"></u-navbar>
		<u-sticky offset-top="88rpx" bgColor='white'>
			<view class="location" style="" @click="chooseLoaction">
				<view style="width: 100rpx;font-size: 14px;">地址:</view>
				<view style="width:calc(100% - 100rpx)">
					<u-input suffixIcon='map' readonly inputAlign="right" v-model='address'></u-input>
				</view>
			</view>
			<view class="location" @click="warehouseShow  = true" style="justify-content: space-between;">
				<view style="width: 100rpx;font-size: 14px; ">仓库:</view>
				<view style="width:calc(100% - 100rpx)">
					<u-input suffixIcon='arrow-down' inputAlign="right" readonly v-model='warehouseName'></u-input>
				</view>
			</view>
			<view class="storeInfo" style="">
				<view class="info">
					<view style="width: 100rpx;font-size: 14px">名称:</view>
					<view>
						<u-input inputAlign="right" placeholder="请输入店铺名称" v-model="storeName"></u-input>
					</view>
				</view>
				<view class="info" style="">
					<view style="width: 100rpx;font-size: 14px">备注:</view>
					<view>
						<u-input v-model='remark' inputAlign="right" placeholder="请输入留言"></u-input>
					</view>
				</view>
				<view class="info">
					<view style="width: 100rpx;font-size: 14px">姓名:</view>
					<view>
						<u-input inputAlign="right" placeholder="请输入姓名" v-model='userName'></u-input>
					</view>
				</view>
				<view class="info">
					<view style="width: 100rpx;font-size: 14px">电话:</view>
					<view>
						<u-input inputAlign="right" placeholder="请输入电话" v-model="phone"></u-input>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="materialTitle" style="">
			<view style="width:300rpx">材料名称</view>
			<view style="width:80rpx;">折扣</view>
			<view style="width: 100rpx;">价格</view>
			<view style="width:270rpx">数量</view>
		</view>
		<view style="padding-bottom:100rpx;text-align: center;" v-if="materialList.length > 0">
			<view v-for="(v,i) in materialList" :key="v.classificationId"
				v-if='!disabledClassificationIdList.includes(v.classificationId)'
				style="display: flex;align-items: center;padding:20rpx 0;border-bottom: 1rpx solid #eee;">
				<view style="width: 300rpx;text-align: center;padding-right:30rpx;position: relative;">{{v.name}}
					<view v-if="v.discount !== 1" class="disCountTag" :style="{'background':color}">
						补
					</view>
				</view>
				<view style="widt:450rpx;display: flex;align-items: center;">
					<view style="width: 80rpx;">
						{{v.unit}}
						<!-- <view class="" v-if="v.discount == 1"> 
							<u-tag text="暂无" plain size="mini"></u-tag>
						</view>
						<view v-else>
							<u-tag text="补贴" plain size="mini"></u-tag>
						</view> -->
					</view>
					<view style="width: 100rpx;" :style="{color:color}">{{v.salePrice}}</view>
					<view style="width: 270rpx;display: flex;justify-content: center;">
						<u-number-box button-size="20" :color="color" v-model="v.buyCount" min="0"
							 >
						</u-number-box>
					</view>
				</view>
			</view>
		</view>
		<view class="paymentContainer" style="">
<!-- 			<view>
				<view>总计:<text style="margin:0 10rpx" :style="{'color':color}">{{totalAmount}} </text>元</view>
			</view>
			<view>
				<view>立减：<text style="color:red">-{{totalDiffPrice}}元</text></view>
				<view style="font-size: 12px;color:#c9c9c9">下单即享补贴</view>
			</view>
			<view>应付:{{totalDisCount}}元</view> -->
			<u-button throttleTime='10000' :color='color' shape="circle"
				@click="createOrderPreview">创建订单</u-button>
		</view>
		<watermark :sytext='watermark'></watermark>
		<u-picker :show="warehouseShow" :confirmColor='color' @cancel='close' @close='close' keyName='warehouseName'
			ref="uPicker" @confirm='warehouseConfirm' :columns="warehouseList"></u-picker>
			
		<!-- 预览 -->
		<u-popup :show='previewShow' @close="close" closeOnClickOverlay="true">
			<view>
				
			</view>
		</u-popup>
	</view>
</template>
<script>
	import watermark from '@/components/watermark/watermark.vue';
	let app = getApp();
	import Decimal from 'decimal.js'

	export default {
		components: {
			watermark
		},
		onShareAppMessage(res) {
			return {
				title: '加创材料',
				path: '/pages/index/index',
			}
		},
		onLoad() {
			uni.$u.http.get('/user/userInfo').then(async res => {
				if (res) {
					this.watermark = res.userName;
					await this.disabledClassificationId();

				} else {
					this.watermark = ''
				}
			})
		},
		data() {
			return {
				// x: Decimal(app.globalData.screenWidth).sub(Decimal(50)).toNumber(),
				// y: Decimal(app.globalData.screenHeight).sub(Decimal( 250)).toNumber(),
				// old: {
				// 	x: 0,
				// 	y: 0
				// },
				watermark: '',
				previewShow:true,
				account: '',
				color: app.globalData.defaultColor,
				totalAmount: 0,
				disabledClassificationIdList: [],
				paymentAmount: 0,
				totalDisCount: 0, // 打折后总额
				totalDiffPrice: 0, //差额总额
				materialList: [],
				warehouseShow: false,
				warehouseList: [],
				lat: '',
				long: '',
				address: '',
				storeName: '',
				remark: '',
				phone: '',
				userName: '',
				warehouseId: '',
				discountAmount: 0,
				warehouseName: '请选择',
				countChangeStatus:false
			}
		},
		methods: {
			// onChange(e) {
			// 	this.old.x = e.detail.x
			// 	this.old.y = e.detail.y
			// },
			close() {
				this.warehouseShow = false;
				this.previewShow =false;
			},
			warehouseConfirm(e) {
				this.warehouseName = e.value[0].warehouseName;
				this.warehouseId = e.value[0].warehouseId;
				this.warehouseShow = false;
			},
			getWarehouseList() {
				let params = {
					pageSize: 1000000000,
					pageNumber: 1
				}
				uni.$u.http.get('/warehouse/warehouseList', {
					params: params
				}).then(res => {
					this.warehouseList[0] = res.rows;
				})
			},
			disabledClassificationId() {
				uni.$u.http.get('/classification/cidList').then(async res => {
					if (res) {
						res.map(el => {
							this.disabledClassificationIdList.push(el.classificationId)
						})
						await this.getMaterial();
						await this.getWarehouseList();
					}

				})
			},
			chooseLoaction() {
				uni.chooseLocation({
					success: (res) => {
						this.lat = res.latitude;
						this.long = res.longitude;
						this.address = res.address;
					}
				})
			},
			buyCountChange(e) {
					// let totalAmount = new Decimal(0);
					// let totalDisCount = new Decimal(0);
					// let totalDiffPrice = new Decimal(0);
					// this.materialList.map(el => {
					// 	if (el.buyCount > 0) {
					// 		let CountPrice = Decimal(el.buyCount).mul(Decimal(el.salePrice)) ;
					// 		let disCountPrice = Decimal(el.discount).mul(Decimal(CountPrice)) ;
					// 		let diffPrice = Decimal(CountPrice).sub(Decimal(disCountPrice)) ;
					// 		totalAmount = Decimal(totalAmount).plus(Decimal(CountPrice))
					// 			.toNumber();
					// 		totalDisCount = Decimal(totalDisCount).plus(Decimal(disCountPrice))
					// 			.toNumber();
					// 	}
					// })
					// let data = Math.ceil(totalDisCount);
					// this.totalDiffPrice = Decimal(totalAmount).sub(Decimal(data)).toNumber();
					// this.totalDisCount = Math.ceil(totalDisCount);
					// this.totalAmount = totalAmount;
			},
			createOrderPreview(){
				console.log(this.materialList)
			},
			createOrder() {
				let remarkInfo = {
					remark: this.remark,
					totalDiffPrice: this.totalDiffPrice,
					totalDisCount: this.totalDisCount,
				}
				let materialList = []
				this.materialList.map(el => {
					if (el.buyCount > 0) {
						materialList = materialList.concat([{
							'buyCount': el.buyCount,
							'classificationId': el.classificationId
						}])
					}
				})
				if (materialList.length == 0) {
					uni.$u.toast('请选择材料!');
					return;
				}
				if (!uni.$u.test.mobile(this.phone.trim())) {
					uni.$u.toast('请输入正确手机号码!');
					return;
				}
				if (this.address.trim() == '' || this.storeName.trim() == '' || this.userName.trim() == '') {
					uni.$u.toast('请填写门店相关信息!');
					return;
				}
				if (this.warehouseId == '') {
					uni.$u.toast('请选择发货仓库!');
					return;
				}
				uni.showModal({
					title: '提示:',
					content: `下单材料共计: ${this.totalDisCount}元,收货人电话: ${this.phone}`,
					success: (res) => {
						if (res.confirm) {
							let params = {
								lon: this.long,
								lat: this.lat,
								storeAddress: this.address,
								storeName: this.storeName,
								storeContacts: this.userName,
								mobile: this.phone,
								materialList: materialList,
								totalAmount: this.totalAmount,
								remark: JSON.stringify(remarkInfo),
								warehouseId: this.warehouseId,
							}
							uni.$u.http.post('/sale/weChatSaleAdd', params).then(res => {
								if (res === null) {
									uni.$u.toast('下单成功购买材料:)');
									setTimeout(() => {
										uni.switchTab({
											url: '/pages/mine/index'
										})
									}, 1000)
								}
							})
						} else if (res.cancel) {
							uni.$u.toast('取消购买材料:)');
						}

					}
				})
			},
			getMaterial() {
				let params = {
					pageSize: 10000,
					pageNumber: 1,
					loading: true
				}
				uni.$u.http.get('/classification/materialList', {
					params: params
				}).then( res => {
					res.rows.map(e => {
						e.buyCount = 0
						if (e.materials.length > 0) {
							e.salePrice = e.materials[0].salePrice;
						}
						let nodiscountArr =['天花射灯','泛光灯','象鼻灯','筒灯-150','筒灯-95']
						if (nodiscountArr.includes(e.name)) {
							e.discount = 1
						} else {
							e.discount = 0.91;
						}
					})
					this.materialList = res.rows;
				})
			}
		}

	}
</script>
<style lang="scss" scoped>
	.paymentContainer {
		padding: 10rpx 20rpx;
		position: fixed;
		bottom: -1px;
		left: 0;
		width: calc(100% - 40rpx);
		padding: 20rpx;
		background-color: white;
		z-index: 1000;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.storeInfo {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: calc(100% - 40rpx);
		padding: 0 20rpx;
		font-size: 15px;
	}

	.info {
		border-bottom: 1rpx solid #eee;
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10rpx;
	}

	.location {
		border-bottom: 1rpx solid #eee;
		text-align: left;
		padding: 0 20rpx;
		width: calc(100% - 40rpx);
		font-size: 15px;
		display: flex;
		align-items: center;
	}

	.materialItem:nth-child(1) {
		border-top: 0 !important;
	}
	.materialTitle {
		display: flex;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.disCountTag {
		transform: scale(0.8);
		position: absolute;
		top: -10px;
		right: -10px;
		color: white;
		z-index: 100;
		font-size: 12px;
		padding: 2px 4px;
		border-bottom-right-radius: 4px;
		border-top-left-radius: 4px
	}
</style>